import React, { useEffect, useState } from 'react'
import { Card, Divider } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import './css/mine.scss'
import '@nutui/nutui-react/dist/style.css'
import IconFont from './Tubiao';
import { Cell, Button } from '@nutui/nutui-react'
import { ArrowRight, User } from '@nutui/icons-react'
import axios from './Axios'
export default function My() {
  const navigate = useNavigate()
  const [gongju,setgongju] = useState([
    {name:'我的收藏',icon:'icon-shoucang_shixin',url:'/shoucang'},
    {name:'我的评价',icon:'icon-pinglun',url:'/pingjia'},
    {name:'优惠券',icon:'icon-youhuiquan',url:'/quan'},
    {name:'观演人',icon:'icon-navbar_guanzhong_xuanzhong',url:'/guanyan'},
    {name:'我的群组',icon:'icon-jiucanrenshu',url:'5'},
    {name:'地址管理',icon:'icon-dingwei',url:'/address'},
    {name:'咨询客服',icon:'icon-kefu',url:'7'},
    {name:'意见反馈',icon:'icon-yijianfankui',url:'8'},
    {name:'常见问题',icon:'icon-wenti',url:'9'},
  ])
  const getuser = async () => {
    let { data } = await axios.get('/getuser')
    console.log(data.list[2]);
    sessionStorage.setItem('user', JSON.stringify(data.list[2]))
  }
  const [fanlist, setfanlist] = useState([])
    const getfan = async () => {
        let { data } = await axios.get('/getuser')
        setfanlist(data.list[2].fans)
    }
  const [info, setinfo] = useState(JSON.parse(sessionStorage.getItem('user')))
  useEffect(() => {
    getuser()
    getfan()
    
  }, [])
  return (
    <div className='waidiv'>
      <div className='chilun'>
        <p className='icon' onClick={()=>(navigate('/settings'))}><IconFont name='icon-chilun' style={{ fontSize: '20px' }}></IconFont></p>
      </div>
      <div className='touxiang'>
        <p className='pic'><img alt='' src={info.avatar}></img></p>
        <h2 className='name'>{info.nickname}</h2>
        <p className='fans' onClick={() => (navigate('/fans'))}>
          <span>关注 {fanlist.filter(item => item.sta == true).length}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>粉丝{fanlist.length}</span>
        </p>
        <p className='personhome'>个人主页<IconFont name='icon-arrow-right'></IconFont></p>
      </div>
      <div className='kaishi' onClick={() => (navigate('/begin'))}>
        <p className='begin'>即将开始</p>
        <p className='drama'><img alt='' src='.././1.png'></img></p>
        <p className='title'>舞台剧东野圭吾【虚无的十字架】</p>
        <p className='time'>
          2024年07月17日 19:00
        </p>
        <p className='jiantou'><IconFont name='icon-arrow-right'></IconFont></p>
      </div>
      <div className='caidan' onClick={() => (navigate('/order'))}>
        <Cell
          className="nutui-cell-clickable"
          title="我的订单"
          align="center"
          extra={<ArrowRight />}
          onClick={() => (console.log(123))}
          size='large'
        />
      </div>
      <div className='banshou'>
        <p className='banshoutop'>常用工具</p>
        <div className='banshoumenu'>
          {
            gongju.map((item, index) => {
              return (
                <div key={index} onClick={() => { navigate(item.url) }}>
                  <IconFont name={item.icon} style={{ fontSize: '20px' }}></IconFont>
                  <p>{item.name}</p>
                </div>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}
